<template>
  <div>
    <div>
      根据订单编号查询：<el-input placeholder="请输入订单编号" @change="selOrderById" v-model="orderId"
        style="width: 230px;"></el-input>
      根据订单状态查询：
      <template>
        <el-select v-model="orderState" placeholder="请选择订单状态" @change="selectRecycleOrderState">
          <el-option v-for="s in stateList" :key="s.value" :label="s.label" :value="s.value">
          </el-option>
        </el-select>
      </template>
    </div>

    <div v-if="orderList">
      <div v-for="r in recycleOrderList" style="margin-top: 15px;background-color: #fff4ee;text-align: center;">
        <div style="font-style: oblique;padding: 5px;border-bottom: 2px dashed #b3b7bc;text-align: left;">
          <el-row>
            <el-col :span="8">
              订单编号：
              <span style="font-size: 13px;">
                {{r.orderId}}
              </span>
              <span style="font-size: 13px;" v-if="r.payState==13">
                &nbsp;&nbsp;(已转账支付)
              </span>
            </el-col>
            <el-col :span="8">
              地址：
              <span style="font-size: 13px;">
                {{r.address}}
              </span>
            </el-col>
            <el-col :span="8" v-if="r.orderState==3">
              <el-row>
                <el-col :span="16">
                  <span>&nbsp;</span>
                </el-col>
                <el-col :span="8">
                  <el-button size="mini" type="success" style="width: 80px;"
                    @click="toPayOrder(r.orderId,r.orderPrice.toFixed(2))">支付费用</el-button>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8" v-if="r.orderState==4||r.orderState==9||r.orderState==10||r.orderState==11">
              <template>
                修改订单状态：
                <el-select style="width: 180px;height: 45px;" v-model="recycleOrderState" placeholder="请选择订单状态"
                  @change="changeRecycleOrderState(r.orderId)">
                  <el-option v-for="s in recycleOrderStateList" :key="s.value" :label="s.label" :value="s.value">
                  </el-option>
                </el-select>
              </template>
            </el-col>
            <el-col :span="8" v-if="r.orderState==5">
              <div>
                站点取消原因：
                <span class="cancel_reason_text">
                  {{r.refuseReason}}
                </span>
                <span style="font-size: 13px;">
                  &nbsp;（{{r.cancelDate}}）
                </span>
              </div>
            </el-col>
            <el-col :span="8" v-if="r.orderState==6">
              <div>
                用户取消原因：
                <span class="cancel_reason_text">
                  {{r.userCancelReason}}
                </span>
                <span style="font-size: 13px;">
                  &nbsp;（{{r.cancelDate}}）
                </span>
              </div>
            </el-col>
            <el-col :span="8" v-if="r.orderState==7">
              <div>
                回收员取消原因：
                <span class="cancel_reason_text">
                  {{r.recycleCancelReason}}
                </span>
                <span style="font-size: 13px;">
                  &nbsp;（{{r.cancelDate}}）
                </span>
              </div>
            </el-col>
            <el-col :span="8" v-if="r.orderState==8">
              <div>
                系统取消原因：
                <span class="cancel_reason_text">
                  超时未接单
                </span>
                <span style="font-size: 13px;">
                  &nbsp;（{{r.cancelDate}}）
                </span>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top: 15px;">
          <el-row>
            <el-col :span="3">
              <div>
                下单时间
              </div>
              <div class="recycle_order_text">
                {{r.orderTime}}
              </div>
            </el-col>
            <el-col :span="3">
              <div>
                预约取货时间
              </div>
              <div class="recycle_order_text">
                {{r.takeTime}}
              </div>
            </el-col>
            <el-col :span="3">
              <div>
                订单总价
              </div>
              <div :class="getAllMoneyStyle(r.orderState)">
                {{r.orderPrice.toFixed(2)}}&nbsp;￥
              </div>
            </el-col>
            <!-- <el-col :span="2">
              <div>
                重量
              </div>
              <div class="recycle_order_text">
                {{r.weight}}&nbsp;kg
              </div>
            </el-col> -->
            <el-col :span="3">
              <div>
                出货人联系方式
              </div>
              <div class="recycle_order_text">
                {{r.orderPhone}}
              </div>
            </el-col>
            <el-col :span="3">
              <div>
                订单备注
              </div>
              <div class="recycle_order_text">
                {{r.remarks}}
              </div>
            </el-col>
            <el-col :span="3">
              <div>
                物品图片信息
              </div>
              <div>
                <template v-if="r.goodsPhotos && r.goodsPhotos.length > 0">
                  <el-image style="width: 80px; height: 80px" :src="r.goodsPhotos[0]" :preview-src-list="r.goodsPhotos">
                  </el-image>
                </template>
              </div>
            </el-col>
            <el-col :span="3">
              <div>
                状态
              </div>
              <div class="recycle_order_text" style="color: #ff5500;">
                {{r.state}}
              </div>
            </el-col>
            <el-col :span="2">
              <div>
                操作
              </div>
              <div class="order_text">
                <el-button size="mini" type="warning" style="width: 80px;" v-if="r.orderState==2||r.orderState==3"
                  @click="recycleCancelOrder(r.orderId)">取消订单</el-button><br>
                <el-button v-if="r.orderState!=2&&r.orderState!=3" size="mini" style="width: 80px;margin-top: 15px;"
                  @click="toOrderDetails(r)">订单详情</el-button>
                <el-button v-if="r.orderState==2||r.orderState==3" size="mini" type="primary"
                  style="width: 80px;margin-top: 15px;" @click="toOrderDetails(r)">核实订单</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div
          style="text-align: left;padding: 5px;font-style: oblique;font-size: 5px;height: 40px;background-color: #fff4ee;"
          v-if="r.orderState!=5&&r.orderState!=6&&
        r.orderState!=7&&r.orderState!=8">
          <el-steps :simple="true" :active="r.orderState==9?5:r.orderState==10?6:r.orderState==11?7:r.orderState"
            finish-status="success">
            <el-step title="已接单"></el-step>
            <el-step title="取货中"></el-step>
            <el-step title="交易中"></el-step>
            <el-step title="转账"></el-step>
            <el-step title="取货"></el-step>
            <el-step title="返程"></el-step>
            <el-step title="到达站点"></el-step>
          </el-steps>
        </div>
      </div>
      <div class="page_bottom">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.current" :page-sizes="[1,3,5, 7, 9, 11]" :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>
      </div>

    </div>
    <!-- 取消订单窗口 -->
    <el-dialog title="取消订单原因" :visible.sync="cancelOrderWindow" width="30%" center>
      <el-input type="textarea" placeholder="取消原因" v-model="cancelReason"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="recycleCancel">取 消</el-button>
        <el-button type="primary" @click="okCancelRecycleOrder">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 支付转账检查窗口 -->
    <el-dialog title="转账窗口" :visible.sync="payCheckWindow" width="30%" center>
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item prop="orderPrice" label="订单金额 ">
          <el-input v-model="form.orderPrice" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item prop="payAccountName" label="账户姓名验证">
          <el-input v-model="form.payAccountName"></el-input>
        </el-form-item>
        <el-form-item prop="payOrderRemarks" label="转账备注">
          <el-input type="textarea" v-model="form.payOrderRemarks"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelPayOrder">取 消</el-button>
        <el-button type="primary" @click="okToPayOrder">确 定</el-button>
      </span>
    </el-dialog>

    <div v-if="orderDetails">
      <div>
        <div style="margin-top: 15px;background-color: #fff4ee;text-align: center;">
          <div style="font-style: oblique;padding: 5px;border-bottom: 2px dashed #b3b7bc;text-align: left;">
            <el-row>
              <el-col :span="8">
                订单编号：
                <span style="font-size: 13px;">
                  {{orderDTO.orderId}}
                </span>
                <span style="font-size: 13px;" v-if="orderDTO.payState==13">
                  &nbsp;&nbsp;(已转账支付)
                </span>
              </el-col>
              <el-col :span="8">
                地址：
                <span style="font-size: 13px;">
                  {{orderDTO.address}}
                </span>
              </el-col>
              <el-col :span="8" v-if="orderDTO.orderState==3">
                <el-row>
                  <el-col :span="16">
                    <span>&nbsp;</span>
                  </el-col>
                  <el-col :span="8">
                    <el-button size="mini" type="success" style="width: 80px;"
                      @click="toPayOrder(orderDTO.orderId,orderDTO.orderPrice.toFixed(2))">支付费用</el-button>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="8"
                v-if="orderDTO.orderState==4||orderDTO.orderState==9||orderDTO.orderState==10||orderDTO.orderState==11">
                <template>
                  修改订单状态：
                  <el-select style="width: 180px;height: 45px;" v-model="recycleOrderState" placeholder="请选择订单状态"
                    @change="changeRecycleOrderState(orderDTO.orderId)">
                    <el-option v-for="s in recycleOrderStateList" :key="s.value" :label="s.label" :value="s.value">
                    </el-option>
                  </el-select>
                </template>
              </el-col>
              <el-col :span="8" v-if="orderDTO.orderState==5">
                <div>
                  站点取消原因：
                  <span class="cancel_reason_text">
                    {{orderDTO.refuseReason}}
                  </span>
                  <span style="font-size: 13px;">
                    &nbsp;（{{orderDTO.cancelDate}}）
                  </span>
                </div>
              </el-col>
              <el-col :span="8" v-if="orderDTO.orderState==6">
                <div>
                  用户取消原因：
                  <span class="cancel_reason_text">
                    {{orderDTO.userCancelReason}}
                  </span>
                  <span style="font-size: 13px;">
                    &nbsp;（{{orderDTO.cancelDate}}）
                  </span>
                </div>
              </el-col>
              <el-col :span="8" v-if="orderDTO.orderState==7">
                <div>
                  回收员取消原因：
                  <span class="cancel_reason_text">
                    {{orderDTO.recycleCancelReason}}
                  </span>
                  <span style="font-size: 13px;">
                    &nbsp;（{{orderDTO.cancelDate}}）
                  </span>
                </div>
              </el-col>
              <el-col :span="8" v-if="orderDTO.orderState==8">
                <div>
                  系统取消原因：
                  <span class="cancel_reason_text">
                    超时未接单
                  </span>
                  <span style="font-size: 13px;">
                    &nbsp;（{{orderDTO.cancelDate}}）
                  </span>
                </div>
              </el-col>
            </el-row>
          </div>
          <div style="margin-top: 15px;">
            <el-row>
              <el-col :span="3">
                <div>
                  下单时间
                </div>
                <div class="recycle_order_text">
                  {{orderDTO.orderTime}}
                </div>
              </el-col>
              <el-col :span="3">
                <div>
                  预约取货时间
                </div>
                <div class="recycle_order_text">
                  {{orderDTO.takeTime}}
                </div>
              </el-col>
              <el-col :span="3">
                <div>
                  订单总价
                </div>
                <div :class="getAllMoneyStyle(orderDTO.orderState)">
                  {{orderDTO.orderPrice.toFixed(2)}}&nbsp;￥
                </div>
              </el-col>
              <!-- <el-col :span="2">
                <div>
                  重量
                </div>
                <div class="recycle_order_text">
                  {{orderDTO.weight}}&nbsp;kg
                </div>
              </el-col> -->
              <el-col :span="3">
                <div>
                  出货人联系方式
                </div>
                <div class="recycle_order_text">
                  {{orderDTO.orderPhone}}
                </div>
              </el-col>
              <el-col :span="3">
                <div>
                  订单备注
                </div>
                <div class="recycle_order_text">
                  {{orderDTO.remarks}}
                </div>
              </el-col>
              <el-col :span="3">
                <div>
                  物品图片信息
                </div>
                <div>
                  <template v-if="orderDTO.goodsPhotos && orderDTO.goodsPhotos.length > 0">
                    <el-image style="width: 80px; height: 80px" :src="orderDTO.goodsPhotos[0]"
                      :preview-src-list="orderDTO.goodsPhotos">
                    </el-image>
                  </template>
                </div>
              </el-col>
              <el-col :span="3">
                <div>
                  状态
                </div>
                <div class="recycle_order_text" style="color: #ff5500;">
                  {{orderDTO.state}}
                </div>
              </el-col>
              <el-col :span="2">
                <div>
                  操作
                </div>
                <div class="order_text">
                  <el-button size="mini" type="warning" style="width: 80px;"
                    v-if="orderDTO.orderState==2||orderDTO.orderState==3"
                    @click="recycleCancelOrder(orderDTO.orderId)">取消订单</el-button><br>
                  <el-button size="mini" style="width: 80px;margin-top: 15px;" @click="toOrderList()">订单列表</el-button>
                </div>
              </el-col>

            </el-row>
          </div>
          <div
            style="text-align: left;padding: 5px;font-style: oblique;font-size: 5px;height: 40px;background-color: #fff4ee;"
            v-if="orderDTO.orderState!=5&&orderDTO.orderState!=6&&
          orderDTO.orderState!=7&&orderDTO.orderState!=8">
            <el-steps :simple="true"
              :active="orderDTO.orderState==9?5:orderDTO.orderState==10?6:orderDTO.orderState==11?7:orderDTO.orderState"
              finish-status="success">
              <el-step title="已接单"></el-step>
              <el-step title="取货中"></el-step>
              <el-step title="交易中"></el-step>
              <el-step title="转账"></el-step>
              <el-step title="取货"></el-step>
              <el-step title="返程"></el-step>
              <el-step title="到达站点"></el-step>
            </el-steps>
          </div>
        </div>
      </div>
      <!-- 订单详情 -->
      <div style="background-color: #fff4ee;text-align: center;margin-top: 15px;">
        <div style="background-color: #f0f0f0;border-bottom: 1px solid #b3b7bc;padding: 5px;">
          <el-button type="success" size="small" :disabled="orderDTO.orderState==2?false:orderDTO.orderState==3?false:true"
            @click="okToChangeOrder(orderDTO.orderId,orderDTO.orderDetailsDTOList)">核实无误确认提交修改</el-button>
        </div>
        <div v-for="o in orderDTO.orderDetailsDTOList" style="border-bottom: 1px solid #dfe4ea;margin-top: 15px;">
          <el-row>
            <el-col :span="4">
              <div class="table_header">
                种类
              </div>
              <div class="order_det_text">
                <template>
                  <el-select :disabled="(orderDTO.orderState==2&&o.state==0)?false:(orderDTO.orderState==3&&o.state==0)?false:true" @change="changeKind(o)" v-model="o.kind"
                    placeholder="请选择" style="width: 120px;">
                    <el-option v-for="k in siteKindsList" :key="k.typeId" :label="k.typeName" :value="k.typeId">
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="table_header">
                名称
              </div>
              <div class="order_det_text">
                <el-input :disabled="(orderDTO.orderState==2&&o.state==0)?false:(orderDTO.orderState==3&&o.state==0)?false:true" v-model="o.name" style="width: 150px;"></el-input>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="table_header">
                详情图
              </div>
              <div>
                <el-upload :disabled="(orderDTO.orderState==2&&o.state==0)?false:(orderDTO.orderState==3&&o.state==0)?false:true" class="avatar-uploader" :action="uploadUrl"
                  :show-file-list="true" :on-success="handleAvatarSuccess.bind(null,o)"
                  :before-upload="beforeAvatarUpload" :on-remove="handleRemove.bind(null,o)" :limit="1">
                  <img v-if="o.photo" :src="o.photo" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="table_header">
                重量&数量
              </div>
              <div class="order_det_text">
                <el-input :disabled="(orderDTO.orderState==2&&o.state==0)?false:(orderDTO.orderState==3&&o.state==0)?false:true" v-model="o.weight" @change="changeWeight(o)"
                  style="width: 80px;"></el-input>
                &nbsp;{{o.units}}
              </div>
            </el-col>
            <el-col :span="2">
              <div class="table_header">
                ￥/{{o.units}}
              </div>
              <div class="order_det_text">
                {{o.unitPrice}}
              </div>
            </el-col>
            <el-col :span="2">
              <div class="table_header">
                总价
              </div>
              <div :class="getOrderDetailsMoneyStyle(o.state)">
                {{o.price.toFixed(2)}}&nbsp;￥
              </div>
            </el-col>
            <el-col :span="4">
              <div class="table_header">
                操作
              </div>
              <div class="order_det_text" v-if="o.state==1">
                <div>
                  已撤销
                </div>
              </div>
              <div class="order_det_text" v-if="o.state==0">
                <el-button size="mini" type="warning" style="width: 80px;"
                  @click="cancelOrderDetails(o.id,o.orderId)">撤销物品</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

    </div>



  </div>

</template>

<script>
  import {
    error
  } from 'shelljs';
  export default {
    data() {
      return {
        recycleOrderState: "", //回收员确认的订单状态
        recycleOrderStateList: [{
          value: '9',
          label: '已取货'
        }, {
          value: '10',
          label: '已返程'
        }, {
          value: '11',
          label: '已到站'
        }],
        orderState: "", //订单状态
        stateList: [{
            value: '',
            label: '选择所有'
          },
          {
            value: '2',
            label: '取货中'
          }, {
            value: '3',
            label: '交易中'
          }, {
            value: '4',
            label: '已转账支付'
          }, {
            value: '101',
            label: '已取消'
          }, {
            value: '9',
            label: '已取货'
          }, {
            value: '10',
            label: '已返程'
          }, {
            value: '11',
            label: '已到站'
          }
        ],
        orderId: "", //订单编号
        recycleOrderList: [], //回收员负责的订单数据
        pageNum: 1, //页数
        pageSize: 3, //每页数量
        page: {}, //分页对象
        cancelOrderId: "", //回收员取消的订单
        cancelReason: "", //取消原因
        cancelOrderWindow: false, //取消订单窗口
        orderList: true, //订单集合页面是否加载
        orderDetails: false, //订单详情窗口
        orderDTO: {}, //订单详情对象
        siteKindsList: [], //站点自己的类别集合数据
        siteKindId: "", //站点的类别id
        dialogVisible: false, //图片放大弹窗
        uploadUrl: "http://localhost:9099/order/recycleOrder/uploadPhoto", //上传文件的url
        payOrderId: "", //支付转账的订单id
        payCheckWindow: false, //支付转账检查窗口
        form: {
          payAccountName: '', //转账的账户的姓名验证
          payOrderRemarks: "", //转账备注
          orderPrice: "", //订单总价
        },
        rules: {
          payAccountName: [{
            required: true,
            message: '请输入账户姓名',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      //回收员确认订单状态
      changeRecycleOrderState(orderId) {
        this.$http.post("/order/recycleOrder/recycleVerifyOrder.recycle", {
          orderId: orderId,
          orderState: this.recycleOrderState
        }).then(resp => {
          alert(resp.data.message)
          if (resp.data.flag) {
            this.orderId = orderId
            this.selOrderById()
            this.getRecycleOrderList()
          }
        })
      },
      //确认转账
      okToPayOrder() {
        this.$http.post("/order/recycleOrder/payTheUser.recycle", {
          orderId: this.payOrderId,
          remark: this.form.payOrderRemarks,
          setPayRealName: this.form.payAccountName
        }).then(resp => {
          alert(resp.data.message)
          if (resp.data.flag) {
            this.orderId = this.payOrderId
            this.selOrderById()
            this.getRecycleOrderList()
            this.form.payOrderRemarks = ""
            this.form.payAccountName = ""
            this.form.orderPrice = ""
            this.payOrderId = ""
            this.payCheckWindow = false
          }
        })

      },
      //取消转账
      cancelPayOrder() {
        this.form.payOrderRemarks = ""
        this.form.payAccountName = ""
        this.form.orderPrice = ""
        this.payOrderId = ""
        this.payCheckWindow = false
      },
      //支付转账给该用户
      toPayOrder(orderId, price) {
        this.payCheckWindow = true
        this.payOrderId = orderId;
        this.form.orderPrice = price

      },
      //回收员选择订单状态查询
      selectRecycleOrderState() {
        this.$http.post("/order/recycleOrder/recycleGetOrderList.recycle", {
          pageNum: 1,
          pageSize: 3,
          orderState: this.orderState
        }).then(resp => {
          if (resp.data.flag) {
            this.orderDetails = false
            this.orderList = true
            this.recycleOrderList = resp.data.data.records;
            this.page = resp.data.data
          } else {
            alert(resp.data.message)
          }
        })
      },
      //撤销该订单子项
      cancelOrderDetails(id, orderId) {
        this.$http.post("/order/recycleOrder/cancelOrderDetail.recycle?id=" + id).then(resp => {
          alert(resp.data.message)
          if (resp.data.flag) {
            this.orderId = orderId
            this.selOrderById()
            this.getRecycleOrderList()
          }
        })
      },
      handleRemove(o, file, fileList) {
        this.$http.post("/order/recycleOrder/delPhoto", {
          photoPath: o.photo
        }).then(resp => {
          console.log(resp.data.message)
        })
        o.photo = ""
        // console.log(file, fileList);
      },
      handleAvatarSuccess(o, response) {
        o.photo = response.data;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //回收员核实订单确认订单数据
      okToChangeOrder(orderId, list) {
        console.log(orderId)
        console.log(list)
        this.$http.post("/order/recycleOrder/recycleUpdateOrder.recycle", {
          orderId: orderId,
          updateOrderDetailsForms: list
        }).then(resp => {
          alert(resp.data.message)
          if (resp.data.flag) {
            this.orderId = orderId
            this.selOrderById()
            this.getRecycleOrderList()
          }
        })
      },
      //修改数量或重量
      changeWeight(o) {
        o.price = o.unitPrice * o.weight
      },
      //修改类别
      changeKind(o) {
        for (var i = 0; i < this.siteKindsList.length; i++) {
          if (o.kind == this.siteKindsList[i].typeId) {
            o.units = this.siteKindsList[i].unit
            o.unitPrice = this.siteKindsList[i].typePrice
            o.kindName = this.siteKindsList[i].typeName
            o.price = this.siteKindsList[i].typePrice * o.weight
          }
        }
      },
      //查询站点的类别集合数据
      getSiteKindsList() {
        this.$http.post("/site/siteKindsPrice/recycleSelect.recycle").then(resp => {
          if (resp.data.flag) {
            this.siteKindsList = resp.data.data
          }
        })
      },
      //根据订单编号查询
      selOrderById() {
        this.$http.post("/order/recycleOrder/recycleGetOrder.recycle?orderId=" + this.orderId).then(resp => {
          if (resp.data.flag) {
            this.orderDTO = resp.data.data
            this.orderList = false
            this.orderDetails = true
          } else {
            alert(resp.data.message)
          }
        })
      },
      //返回订单列表
      toOrderList() {
        this.orderDTO = null
        this.orderDetails = false
        this.orderList = true
      },
      //查看订单详情
      toOrderDetails(orderDTO) {
        this.getSiteKindsList()
        this.orderDTO = orderDTO
        this.orderList = false
        this.orderDetails = true
      },
      //每页数量改变
      handleSizeChange(val) {
        this.$http.post("/order/recycleOrder/recycleGetOrderList.recycle", {
          pageNum: 1,
          pageSize: val,
          orderState: this.orderState
        }).then(resp => {
          if (resp.data.flag) {
            this.recycleOrderList = resp.data.data.records;
            this.page = resp.data.data
          } else {
            alert(resp.data.message)
          }
        })
      },
      //页数改变
      handleCurrentChange(val) {
        this.$http.post("/order/recycleOrder/recycleGetOrderList.recycle", {
          pageNum: val,
          pageSize: this.page.size,
          orderState: this.orderState
        }).then(resp => {
          if (resp.data.flag) {
            this.recycleOrderList = resp.data.data.records;
            this.page = resp.data.data
          } else {
            alert(resp.data.message)
          }
        })
      },
      //确定取消订单信息
      okCancelRecycleOrder() {
        this.$http.post("/order/recycleOrder/recycleCancelOrder.recycle", {
          orderId: this.cancelOrderId,
          cancelReason: this.cancelReason
        }).then(resp => {
          alert(resp.data.message)
          if (resp.data.flag) {
            this.cancelOrderWindow = false
            this.cancelOrderId = ""
            this.cancelOrderWindow = false
            this.getRecycleOrderList()
          }
        })
      },
      //取消取消订单
      recycleCancel() {
        this.cancelOrderId = ""
        this.cancelReason = ""
        this.cancelOrderWindow = false
      },
      //回收员取消订单
      recycleCancelOrder(orderId) {
        this.cancelOrderId = orderId
        this.cancelOrderWindow = true
      },
      //获取回收员负责的订单数据
      getRecycleOrderList() {
        this.$http.post("/order/recycleOrder/recycleGetOrderList.recycle", {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }).then(resp => {
          if (resp.data.flag) {
            this.recycleOrderList = resp.data.data.records;
            this.page = resp.data.data
          } else {
            alert(resp.data.message)
          }
        })
      },
      //动态获取订单子项的总价的样式
      getOrderDetailsMoneyStyle(state) {
        if (state == 1) {
          return "order_money_text_cancel";
        } else {
          return "order_money_text";
        }
      },
      //订单总价动态获取样式
      getAllMoneyStyle(state) {
        if (state == 5 || state == 6 || state == 7 || state == 8) {
          return "order_money_text_cancel";
        } else {
          return "order_money_text"
        }

      },
    },
    created() {
      this.getRecycleOrderList()
    }
  }
</script>

<style>
  .order_money_text_cancel {
    margin-top: 15px;
    text-decoration: line-through;
    font-weight: bold;
    color: #ababab;
    font-size: 15px;
  }

  .order_money_text {
    margin-top: 15px;
    font-weight: bold;
    color: #ff5500;
    font-size: 15px;
  }

  .cancel_reason_text {
    font-size: 13px;
    color: #ff5500;
    font-weight: bold;
  }

  .table_header {
    font-size: 15px;
    font-style: oblique;
  }

  .order_det_text {
    font-size: 13px;
    margin-top: 15px;
  }

  .order_det_text_cancel {
    text-decoration: line-through;
    color: #ababab;
    font-size: 13px;
    margin-top: 15px;
  }

  .page_bottom {
    margin-top: 15px;
  }

  .recycle_order_text {
    margin-top: 15px;
    font-size: 12px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>
